import React, { Component } from 'react';
import {
  Chart,
  Interval,
  Tooltip,
  Axis,
  Coordinate,
  Line
} from 'bizcharts';
import G6 from '@antv/g6';

export default class Home extends Component {
    componentDidMount(){
        this.getCategorys2()
    }

    getCategorys2= ()=>{
        let data = this.data
        const container = document.getElementById('container');
        const width = container.scrollWidth;
        const height = container.scrollHeight || 500;
        const graph = new G6.TreeGraph({
        container: 'container',
        width,
        height,
        linkCenter: true,
        modes: {
            default: [
            {
                type: 'collapse-expand',
                onChange: function onChange(item, collapsed) {
                const data = item.get('model');
                data.collapsed = collapsed;
                return true;
                },
            },
            'drag-canvas',
            'zoom-canvas',
            ],
        },
        defaultNode: {
            size: 30,
        },
        layout: {
            type: 'dendrogram',
            direction: 'LR',
            nodeSep: 20,
            rankSep: 100,
            radial: true,
        },
        });

        graph.node(function (node) {
        return {
            label: node.id,
        };
        });

        graph.data(data);
        graph.render();
        graph.fitView();

        if (typeof window !== 'undefined')
        window.onresize = () => {
            if (!graph || graph.get('destroyed')) return;
            if (!container || !container.scrollWidth || !container.scrollHeight) return;
            graph.changeSize(container.scrollWidth, container.scrollHeight);
        };
    }

    data = {
        "id": "独白",
        "children": [
          {
            "id": "推荐页",
            "children": [
              {
                "id": "名句"
              },
              {
                "id": "作者"
              },
              {
                "id": "诗名"
              }
            ]
          },
          {
            "id": "用户",
            "children": [
              {
                "id": "用户收藏"
              },
              {
                "id": "用户反馈",
              }
            ]
          },
          {
            "id": "专题",
            "children": [
              {
                "id": "飘萍浪迹",
                "children": [
                  {
                    "id": "视频地址"
                  }
                ]
              },
              {
                "id": "游戏三昧",
                "children": [
                    {
                      "id": "诗词接龙"
                    },
                    {
                      "id": "飞花令",
                      "children": [
                          {
                            "id": "花"
                          },
                          {
                            "id": "春"
                          },
                          {
                            "id": "雨"
                          }
                      ]
                    },
                    {
                      "id": "点字成诗"
                    }
                ]
              }
            ]
          },
          {
            "id": "书阁",
            "children": [
              {
                "id": "诗词分类"
              }
            ]
          }
        ]
    }

    
    render() {
       
    
        return (
            <div className='whole' id='container' style={{width:1250,height:450}}>
                
            </div>
            
        )
    }
}